<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.ads{
		width: 600px;
		border-radius: 15px;
		border: solid 3px #a0a0a0; 
		position: relative;
		overflow: hidden;
	}
	.ads .picture{}
	.ads .picture img{
		width: 600px;
	}
	.ads .control{
		position: absolute;
		bottom: 10px;
		right: 5px;
		margin: 0;
		padding: 0;
	}
	.ads .control li{
		list-style: none;
		float: left;
		width: 24px;
		height: 24px;
		line-height: 24px;
		border: solid 1px #aaa;
		background-color: #000;
		color:#fff;
		margin-right: 5px;
		cursor: pointer;
		text-align: center;
	}
	</style>
	<script type="text/javascript">
		function changeSrc(id){
			document.getElementById('ads_img').src = "test" + id + ".jpg";
		}
	</script>
</head>
<body>
	<div class="ads">
		<div class="picture">
			<img id="ads_img" src="test1.jpg" alt="">
		</div>
		<ul class="control">
			<li onclick="changeSrc(1)">1</li>
			<li onclick="changeSrc(2)">2</li>
			<li onclick="changeSrc(3)">3</li>
			<li onclick="changeSrc(4)">4</li>
			<li onclick="changeSrc(5)">5</li>
			<li onclick="changeSrc(6)">6</li>
		</ul>
	</div>
</body>
</html>